<template>
  <div class="loading-box">
    <div class="waiting">
      <div>
        <div class="waiting-img">
          <img :src='imgurl'/>
        </div>
        <div class="waiting-text">{{title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['loadingval'],
  data() {
    return {
      title: '正在加载中...',
      imgurl: require('@/assets/image/common/load.gif')
    }
  },
  methods: {
    changeVal: function() {
      const props_val = this.$props.loadingval
      this.title = props_val
    }
  }
}
</script>

<style lang="css" scoped>
  .loading-box{
    position: fixed;
    background: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    z-index: 51;
    top:0;
    left: 0;
		/* 测试关闭加载效果 */
		/* display: none; */
  }
	img{
		width: 0.4rem;
		margin: auto;
		margin-top: 0.15rem;
		margin-bottom: 0.1rem;
	}
	.waiting{
    background: rgba(0,0,0,0.7);
    z-index: 51;
    color: #fff;
    position: fixed;
    width: 1rem;
    text-align: center;
    height: 1rem;
    margin: 0 auto;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 0.14rem;
    left: calc(50% - 0.5rem);
    left: -webkit-calc(50% - 0.5rem);
    top: calc(50% - 0.5rem);
    top: -webkit-calc(50% - 0.5rem);
	}

</style>
